<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="http://res.easywan.info/public/static/js/jquery-3.2.1.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   
<title>文件上传</title>
</head>
<body>
    <form action="/upload.do" enctype="multipart/form-data" method="post">
    <div class="row">
		
		<div class="col-xs-10 col-xs-offset-1">
		<h2>工具区</h2>
			<div class="form-group">
    	<label for="username">您的姓名(选填):</label>
    	<input type="text" class="form-control" name="username" id="username" placeholder="游客" value="游客">
  		<input type="hidden" name="dest"  value="dest"><br/>
  </div>
 
  <div class="form-group">
    <label for="width">压缩后宽度(默认400px)</label>
    <input type="text" class="form-control" name="w" id="w" placeholder="400" value="400">
  </div>
   <div class="form-group">
    <label for="width">压缩后大小</label>
    <input type="text" class="form-control" id="compress" placeholder="100KB">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">点击上传图片</label>
    <input type="file" id="file" name="file1">
    <p class="help-block"></p>
  </div>
  <button id="start" type="submit" class="btn btn-default">确认压缩</button>
	</div>
	</div>
	</form>
	<div class="row">
		<div class="col-xs-10 col-xs-offset-1">
		<h2>结果区</h2>
			<img width="400" height="400" id="result" alt="" src="imageGet.do?iname=${result }&dest=dest">
		</div>
	</div>
</body>
	<script type="text/javascript">
		var imgFile = 0;
		document.domain = "easywan.info";
		var _URL = window.URL || window.webkitURL;
		$("#file").change(function(){
			console.log("test");
			if ((file = this.files[0])) {
			    img = new Image();
			    imgFile = img;
			    img.onload = function () {
			      console.log(this.width + " " + this.height);
			      console.log(this.width * this.height * 8)
			      console.log(file.size);
			      console.log(img.filesize);
			      x = this.width * this.height * 8 /file.size;
			    
			      var w = $("#w").val();
			      if(w == ""){w = 400;}
			      var fileSize = this.width * this.height * 8;
			      var x = fileSize / file.size;
			      var scala = this.width*1.0 / w;
			      var s = scala * scala;
			      var scalaSize = file.size/s;
			      $(".help-block").text("你的原始图片大小为:"+(file.size/1024)+"KB;压缩后的大小为:"+(scalaSize/1024)+"KB!");
			    };
			    img.src = _URL.createObjectURL(file);
			  }
		});
		$("#w").change(function(){
			console.log(imgFile);
			if(imgFile == 0){return;}
			imgFile.onload = function () {
			      console.log(this.width + " " + this.height);
			      console.log(this.width * this.height * 8)
			      console.log(file.size);
			      console.log(img.filesize);
			      x = this.width * this.height * 8 /file.size;
			    
			      var w = $("#w").val();
			      if(w == ""){w = 400;}
			      var fileSize = this.width * this.height * 8;
			      var x = fileSize / file.size;
			      var scala = this.width*1.0 / w;
			      var s = scala * scala;
			      var scalaSize = file.size/s;
			      $(".help-block").text("你的原始图片大小为:"+(file.size/1024)+"KB;压缩后的大小为:"+(scalaSize/1024)+"KB!");
				$("#compress").val(scalaSize/1024+"KB");    
			};
			 imgFile.src = _URL.createObjectURL(file);
		})
	</script>
</html>